<template>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
    class="demo-ruleForm"
  >
    <el-form-item label="姓名" prop="username">
      <el-input v-model="ruleForm.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="ruleForm.password" show-password></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="ruleForm.email"></el-input>
    </el-form-item>
    <el-form-item label="手机号" prop="mobile">
      <el-input v-model="ruleForm.mobile"></el-input>
    </el-form-item>
    <el-form-item label="性别" prop="gender">
      <el-select v-model="ruleForm.gender" placeholder="请选择性别">
        <el-option label="男" value="男"></el-option>
        <el-option label="女" value="女"></el-option>
        <el-option label="保密" value="保密"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')"
        >立即创建</el-button
      >
      <el-button @click="resetForm('ruleForm')">重置</el-button>
      <el-button @click="resetBack">返回</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import api from '@/api'
export default {
  data() {
    return {
      ruleForm: {
        username: '',
        password: '',
        email: '',
        mobile: '',
        gender: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 6, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'change' }
        ],
        email: [
          {
            type: 'email',
            required: true,
            message: '请输入正确的邮箱',
            trigger: 'change'
          }
        ],
        mobile: [
          { required: true, validator: this.checkMobile, trigger: 'change' }
        ],
        gender: [{ required: true, message: '请选择性别', trigger: 'change' }]
      }
    }
  },
  methods: {
    // 校验手机号
    checkMobile(rule, value, callback) {
      if (value === '') {
        callback(new Error('请输入手机号'))
      } else if (!/^1[3-9]\d{9}$/.test(value)) {
        callback(new Error('手机号你不规范!'))
      } else {
        callback()
      }
    },
    objToStr(obj) {
      let arr = []
      for (let attr in obj) {
        arr.push(attr + '=' + obj[attr])
      }
      return arr.join('&')
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm)
          let obj = JSON.parse(JSON.stringify(this.ruleForm))
          obj.gender = obj.gender === '男' ? '1' : obj.gender === '女' ? '2' : 3
          console.log(obj)
          this.$http.post(api.getUseradd, this.objToStr(obj)).then((res) => {
            console.log(res)
            if (res.errNo === 0 && res.message === 'success') {
              this.$message({
                message: '恭喜你，添加成功',
                type: 'success'
              })
              this.$router.push('/dashboard/user/index')
            } else {
              this.$message.error('添加失败')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    resetBack() {
      this.$router.back()
    }
  }
}
</script>
<style>
</style>
